<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<form class="layui-form">
  姓名:
  <div class="layui-inline">
    <input type="text" name="name" class="layui-input" lay-affix="clear">
  </div>
  年龄:
  <div class="layui-inline">
    <input type="text" name="age" class="layui-input" lay-affix="clear">
  </div>
  地址:
  <div class="layui-inline">
    <input type="text" name="address" class="layui-input" lay-affix="clear">
  </div>

  <div class="layui-inline">
    <button class="layui-btn" lay-submit lay-filter="subitSearch">搜索</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</form>

<table class="layui-hide" id="tableId" lay-filter="tableId"></table>

<script type="text/html" id="toolDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteById">删除</a>
  </div>
</script>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
  </div>
</script>

<script src="/static/jquery-2.1.4.js" type="text/javascript" charset="UTF-8"></script>
<script src="/static/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<script src="/static/mylayer.js" type="text/javascript" charset="UTF-8"></script>

<script>
  layui.use(['table', 'layer', 'form'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;

    table.render({
      elem: '#tableId '
      , url: '/teacher1?method=selectByPage'
      , toolbar: '#toolbarDemo'
      , cols: [[
        {type: 'checkbox', fixed: 'left'}
        , {field: 'id', title: 'ID', sort: true}
        , {field: 'name', title: '姓名'}
        , {field: 'age', title: '年龄'}
        , {field: 'address', title: '地址'}
        , {fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo'}
      ]]
      , page: true
    });

    form.on('submit(subitSearch)', function (data) {
      var field = data.field;
      table.reload('tableId', {
        page: {
          curr: 1
        },
        where: field
      });
      return false;
    });

    table.on('tool(tableId)', function (obj) {
      var data = obj.data;
      console.log(data);
      if (obj.event === 'update') {
        layer.open({
          type: 2,
          title: '编辑数据',
          area: ['70%', '70%'],
          content: '/teacher1_update.jsp?id=' + data.id
        });
      } else if (obj.event === 'deleteById') {
        layer.confirm('您确认要删除吗', function () {
          $.post(
                  '/teacher1?method=deleteById',
                  {'id': data.id},
                  function (result) {
                    console.log(result);
                    if (result.code == 0) {
                      mylayer.okMsg(result.msg);
                      table.reload('tableId');
                    } else {
                      mylayer.errorMsg(result.msg);
                    }
                  },
                  'json'
          );
        });
      }
    });

    table.on('toolbar(tableId)', function (obj) {
      var options = obj.config;
      var checkStatus = table.checkStatus(options.id);
      console.log(obj);

      switch (obj.event) {
        case 'add':
          layer.open({
            type: 2,
            title: '添加数据',
            area: ['70%', '70%'],
            content: '/teacher1_add.jsp'
          });
          break;
        case 'deleteAll':
          var data = checkStatus.data;
          var ids = new Array();
          $(data).each(function () {
            ids.push(this.id);
          })
          layer.confirm('您确认要删除吗', function () {
            $.post(
                    '/teacher1?method=deleteAll',
                    {'ids': ids},
                    function (result) {
                      console.log(result);
                      if (result.code == 0) {
                        mylayer.okMsg(result.msg);
                        table.reload('tableId');
                      } else {
                        mylayer.errorMsg(result.msg);
                      }
                    },
                    'json'
            );
          });
          break;
      }
    });
  });
</script>
</body>
</html>
